<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>nCov-全国分布图</title>
    <script th:src="@{/echarts/echarts.js}"></script>
    <script th:src="@{/jquery/jquery-3.5.1.js}"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px"></div>
<script th:inline="javascript">
    $(function () {
        var myChart = echarts.init(document.querySelector('#container'));
        var option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大数据量面积图',
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10
            }],
            series: [
                {
                    name: '累计确诊人数',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: []
                }
            ]
        };
        myChart.setOption(option);
        function stringToDate (dateStr,separator){
            if (!separator){
                separator= "-" ;
            }
            var  dateArr = dateStr.split(separator);
            var  year = parseInt(dateArr[0]);
            var  month;
            if (dateArr[1].indexOf( "0" ) == 0){
                month = parseInt(dateArr[1].substring(1));
            } else {
                month = parseInt(dateArr[1]);
            }
            var  day = parseInt(dateArr[2]);
            var date = year + "/" + month + "/" + day;
            return  date;
        };
        var fillToChart = function (epidemics) {
            var date = [];
            var affirmed = [];
            var temp = null;
            $.each(epidemics, function (index, epidemic) {
                temp=stringToDate(epidemic.date);
                date.push(temp);
                affirmed.push(epidemic.affirmed);
            });
            myChart.setOption({
                xAxis: {
                    data: date
                },
                series: [{
                    data: affirmed
                }]
            });
        };
        //发送请求获取最新疫情数据
        $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/dataForChart", {}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillToChart(resp.data);
            }
        }, "json");
    });
</script>
</body>
</html>